<template>
  <div class="container">
    <header>
      <span>欢迎登录XX商城</span>
    </header>
    <div class="form">
      <div class="form-group">
        <input type="text" placeholder="用户名/手机号码" class="input-text" v-model="mobile" />
      </div>
      <div class="form-group">
        <template v-if="!showPassword">
          <input type="password" placeholder="密码" class="input-text" v-model="password" />
        </template>
        <template v-else>
          <input type="text" placeholder="密码" class="input-text" v-model="password" />
        </template>
        <van-icon name="eye-o" @click="togglePassword" v-show="!showPassword" />
        <van-icon name="closed-eye" @click="togglePassword" v-show="showPassword" />
      </div>
      <div class="login">
        <button type="button" @click="login">登录</button>
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
@import url("./login.less");
</style>

<script>
import request from "../../utils/request";
export default {
  data() {
    return {
      showPassword: false,
      mobile: "",
      password: ""
    };
  },
  methods: {
    login() {
      request
        .post("/wap/auth/login", {
          mobile: this.mobile,
          password: this.password
        })
        .then(result => {
          const { code, data } = result;
          if (code === 200) {
            localStorage.setItem("token", data.token);
            this.$router.push({ path: "/main" });
          }
        });
    },
    togglePassword() {
      console.log("123");
      this.showPassword = !this.showPassword;
    }
  }
};
</script>